import React, { Suspense, lazy } from 'react'
import ReactDOM from 'react-dom'
import { Switch, Route, Redirect } from 'react-router-dom'
import { Provider } from 'react-redux'
import zh_CN from 'antd/lib/locale-provider/zh_CN'
import "./assets/css/common.less";//通用的样式
import Tabs from "./components/Tabs";//引入底部的页签导航
import { store, persistor } from "./store"
const Home = lazy(() => import("./routes/Home"))
const Profile = lazy(() => import("./routes/Profile"));//个人中心
const Detail = lazy(() => import('./routes/Detail'))
const Cart = lazy(() => import("./routes/Cart"));
import { ConnectedRouter } from 'connected-react-router';//redux绑定路由
import history from './store/history';
import ConfigProvider from 'antd/lib/config-provider'
import { Spin } from 'antd'
const Register = lazy(() => import('./routes/Register'))
const Login = lazy(() => import('./routes/Login'))
import { PersistGate } from "redux-persist/integration/react"
ReactDOM.render((
    <Provider store={store}>
        <PersistGate loading={null} persistor={persistor}>
            <ConnectedRouter history={history}>
                <ConfigProvider locale={zh_CN}>
                    <main className="main-container">
                        <Suspense fallback={<div className="main-container--loading"><Spin tip="Loading... " /></div>}>
                            <Switch>
                                <Route path="/" exact component={Home} />
                                <Route path="/profile" exact component={Profile} />
                                <Route path="/register" exact component={Register} />
                                <Route path="/login" exact component={Login} />
                                <Route path="/detail/:id" component={Detail}></Route>
                                <Route path="/cart" component={Cart} />
                                <Redirect to="/" />
                            </Switch>
                        </Suspense>
                    </main>
                    <Tabs />
                </ConfigProvider>
            </ConnectedRouter>
        </PersistGate>

    </Provider >
), document.getElementById('root'))